import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface MicroWeatherStationProps {
  width?: string | number;
  height?: string | number;
  iconPath?: string;
  iconSize?: {
    width?: number;
    height?: number;
  };
  title?: string;
  titleColor?: string;
  titleFontSize?: number;
  titleFontWeight?: string | number;
  titleLetterSpacing?: string;
  titleLineHeight?: string;
  titleAlign?: 'left' | 'center' | 'right';
  showIcon?: boolean;
  iconOpacity?: number;
  spacing?: number;
  onIconClick?: () => void;
  onTitleClick?: () => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const MicroWeatherStation = forwardRef<HTMLDivElement, MicroWeatherStationProps>((props, ref) => {
  const {
    width = 142,
    height = 32,
    iconPath = 'http://localhost:8085/static/images/qixiangfangzhai/bz64.png',
    iconSize = {
      width: 32,
      height: 32
    },
    title = '微型气象站',
    titleColor = '#FFFFFF',
    titleFontSize = 20,
    titleFontWeight = 400,
    titleLetterSpacing = '2px',
    titleLineHeight = '29px',
    titleAlign = 'left',
    showIcon = true,
    iconOpacity = 1,
    spacing = 4,
    onIconClick,
    onTitleClick,
    theme = 'dark',
    style = {},
    className = '',
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    backgroundImage: `url(http://localhost:8085/static/images/qixiangfangzhai/air-icon-bg.png)`,
    backgroundSize: 'contain',
    '--icon-opacity': iconOpacity,
    '--spacing': `${spacing}px`,
    ...style
  } as React.CSSProperties;

  const handleIconClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onIconClick) {
      onIconClick();
    }
  };

  const handleTitleClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onTitleClick) {
      onTitleClick();
    }
  };

  const microWeatherStationClassName = ['micro-weather-station', theme, className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={microWeatherStationClassName}
      style={componentStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 气象站图标 */}
      {showIcon && (
        <div
          className="weather-station-icon"
          style={{
            width: `${iconSize.width}px`,
            height: `${iconSize.height}px`,
            backgroundImage: iconPath ? `url(${iconPath})` : undefined
          }}
          onClick={handleIconClick}
        />
      )}

      {/* 标题文字 */}
      <div
        className="weather-station-title"
        style={{
          color: titleColor,
          fontSize: `${titleFontSize}px`,
          fontWeight: titleFontWeight,
          letterSpacing: titleLetterSpacing,
          lineHeight: titleLineHeight,
          textAlign: titleAlign
        }}
        onClick={handleTitleClick}
      >
        {title}
      </div>
    </div>
  );
});

MicroWeatherStation.displayName = 'MicroWeatherStation';

export default MicroWeatherStation;
